<template>
  <div class="scheme-box">
    <div class="scheme-title">{{caseInfo.createBy}}->{{caseInfo.schemeNumber}}方案详情</div>
    <div class="details-box">
      <div class="details-item details-right">
        <div :style="{width: '50%'}">
          <a-descriptions :labelStyle="labelStyle" :column="2">
            <a-descriptions-item label="资源合同">{{caseInfo.contractName}}</a-descriptions-item>
            <a-descriptions-item label="贸易类型">
              <span v-for="item in tradeareas" :key="item.value">
                <span v-if="item.value === caseInfo.tradeType">{{item.label}}</span>
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="资源方">{{caseInfo.seller}}</a-descriptions-item>
            <a-descriptions-item label="贸易主体">
               <span v-for="item in areas" :key="item.value">
                <span v-if="item.value === caseInfo.tradeBody">{{item.label}}</span>
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="船舶名称">
              {{caseInfo.shipName}}
            </a-descriptions-item>
            <a-descriptions-item label="IMO">{{caseInfo.imo}}</a-descriptions-item>
            <a-descriptions-item label="租船类型">
              <span v-for="item in contractTypeAreas" :key="item.value">
                <span v-if="item.value === caseInfo.shipContractType">{{item.label}}</span>
              </span>
            </a-descriptions-item>
            <a-descriptions-item label="装载港">{{caseInfo.expectedLoadingPort}}</a-descriptions-item>
            <a-descriptions-item label="卸载港">{{caseInfo.expectedUnloadingPort}}</a-descriptions-item>
            <a-descriptions-item label="预计装载量">
              <span>{{caseInfo.singleGoodsQuantityString}}</span>
            </a-descriptions-item>
            <a-descriptions-item label="预计卸载量">
              <span>{{caseInfo.singleGoodsQuantityString}}</span>
            </a-descriptions-item>
            <template #title>
              <div :style="{textAlign: 'left', fontSize: '20px', color: '#2C3749'}">船舶信息</div>
            </template>
          </a-descriptions>
        </div>
         <div :style="{marginTop: '40px'}">
           <a-timeline>
             <a-timeline-item color="#0062AD">
               <div class="line-name">预计到港时间</div>
               <div class="line-time">{{caseInfo.expectedLoadingDate}}</div>
             </a-timeline-item>
             <a-timeline-item color="#FA6400">
               <div class="line-name">预计装载时间</div>
               <div class="line-time">{{caseInfo.expectedLoadingCompletionWindow}}</div>
             </a-timeline-item>
             <a-timeline-item color="#F5001D">
               <div class="line-name">预计离港时间</div>
               <div class="line-time">{{caseInfo.expectedUnloadingCompletionWindow}}</div>
             </a-timeline-item>
             <a-timeline-item color="#F7B500">
               <div class="line-name">预计卸载时间</div>
               <div class="line-time">{{caseInfo.expectedUnloadingWindow}}</div>
             </a-timeline-item>
           </a-timeline>
         </div>

      </div>
    </div>
    <div class="boat-map">
      <span>船运追踪</span>
      <div>
        <iframe id="mapIframe" ref="mapIframe" :width="'100%'" :height="400" src="http://d.myships.com:8091/haiyou/"></iframe>
      </div>
    </div>
    <div class="boat-btn">
      <div></div>
      <div>
<!--        <a-button class="search-btn1" @click="savePublish">保存下发</a-button>-->
<!--        <a-button class="search-btn2">取消</a-button>-->
      </div>

    </div>
  </div>

</template>

<script setup>
import {getCurrentInstance, onMounted, ref} from 'vue';
import { useRoute } from 'vue-router'
import {message} from "ant-design-vue";
const { proxy  } = getCurrentInstance()
const route = useRoute()
const labelStyle = ref({
  color: '#6B7A8B'
})
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
])
const contractTypeAreas = ref([
  {
    label: '租入长期船',
    value: 1
  },
  {
    label: '租入短期船',
    value: 2
  },
  {
    label: '船舶租出',
    value: 3
  },
  {
    label: '内部转租',
    value: 4
  }
])
// 装载量的单位
const unitareas = ref([
  {
    label: 'MMBtu',
    value: 1
  },
  {
    label: 'm³',
    value: 2
  },
  {
    label: 'MT',
    value: 3
  },
])
const caseInfo = ref({
  createBy: '',
  schemeNumber: '',
  contractName: '',
  tradeType: '',
  tradeBody: '',
  shipName: '',
  imo: '',
  shipContractType: '',
  expectedLoadingPort: '',
  expectedUnloadingPort: '',
  loadingCapacity: '',
  quantityUnit: '',
  expectedLoadingDate: '',
  expectedLoadingCompletionWindow: '',
  expectedUnloadingCompletionWindow: '',
  expectedUnloadingWindow: ''
})
const getInfo = () => {
  proxy.$api.getCaseInfo({schemeId: route.query.id}).then(res => {
    caseInfo.value = res.resultObject
    console.log('获取的详情', caseInfo.value);
  })
}
const savePublish = () => {
  let obj = {
    createBy: localStorage.getItem('userName'),
    schemeId: caseInfo.value.schemeId,
    planId: caseInfo.value.planId,
    details: [],
    formAndTOBOS: []
  }
  proxy.$api.getChartPublish(obj).then(res => {
    console.log('点击下发以后', res)
    message.success('下发成功')
  })
}
onMounted(() => {
  getInfo()
})
</script>

<style lang="scss" scoped>
.scheme-box {
  background: #ffffff;
  padding: 24px 0;
}
.details-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  .details-item {
    width: 50%;
    border: 1px solid #dcdee0;
    margin: 24px;
    padding: 16px 24px;
  }
  .details-right {
    display: flex;
    width: 100%;
  }
  .details-left {
    .left-title {
      font-size: 20px;
      font-weight: bold;
      text-align: left;
      color: #2c3749;
      line-height: 28px;
    }
    .details-left-body {
      width: 100%;
      display: flex;
      .left-item-radar {
        width: 100%;
        height: 250px;
      }
    }
  }
}
.boat-map {
  margin-top: 10px;
  padding: 24px 16px;
  background: #ffffff;
  span {
    display: block;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #2c3749;
    line-height: 28px;
  }
}
.boat-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
}
.line-name {
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  color: #6b7a8b;
  line-height: 22px;

}
.line-time {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  color: #2c3749;
  line-height: 20px;
}
.scheme-title {
  font-size: 28px;
  font-weight: bold;
  text-align: left;
  color: #2c3749;
  line-height: 40px;
  margin-left: 24px;
}
#mapIframe {
  border: 0;
  margin-top: 24px;
}
</style>
